<template>
  <div class="tabList">
    <div :class="index == 0 ? 'tab-item-active' : 'tab-item'" @click="changeTab(0)">
        <img v-show="index != 0" src="@/static/tab/home.png" alt="" >
        <img v-show="index == 0" src="@/static/tab/home-active.png" alt="" >
        <span>首页</span>
    </div>
    <div :class="index == 1 ? 'tab-item-active' : 'tab-item'" @click="changeTab(1)">
        <img v-show="index != 1" src="@/static/tab/community.png" alt="" >
        <img v-show="index == 1" src="@/static/tab/community-active.png" alt="" >
        <span>社区</span>
    </div>
    <div :class="index == 2 ? 'tab-item-active' : 'tab-item'" @click="changeTab(2)">
        <img v-show="index != 2" src="@/static/tab/cart.png" alt="" >
        <img v-show="index == 2" src="@/static/tab/cart-active.png" alt="" >
        <span>购物车</span>
    </div>
    <div :class="index == 3 ? 'tab-item-active' : 'tab-item'" @click="changeTab(3)">
        <img v-show="index != 3" src="@/static/tab/myself.png" alt="" >
        <img v-show="index == 3" src="@/static/tab/myself-active.png" alt="" >
        <span>我的</span>
    </div>
  </div>
</template>

<script>
export default {
    // 
    // data(){
    //     return {
    //         // 
    //         index: 0
    //     }
    // },
    props:{
        index: {
            type: [String,Number],
            default: ()=>{
                return 0
            }
        }
    },
    methods: {
        changeTab(index){
            // 给组件添加自定义事件 通知给父组件
            this.$emit('change',index)
        }
    }
}
</script>

<style lang="scss" scoped>
    .tabList{
        display:flex;
        justify-content: space-around;
        .tab-item,
        .tab-item-active{
            width: 25%;
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                height: 25px;
            }
            span{
                color: #999;
                font-size: 13px;
            }
        }
        .tab-item-active{
            span{
                color: #fc9153;
            }
        }
    }
</style>